<template>
  <div class="user">
    <div class="department">
      <div class="departmentTop">
        <p class="departmentTitle"><span>部门管理</span></p>
        <el-button size="mini" type="success" icon="el-icon-circle-plus-outline" @click="addDept">添加</el-button>
        <el-button size="mini" type="warning" icon="el-icon-edit-outline" @click="update" v-if="!updateShow">修改</el-button>
        <el-button size="mini" type="warning" icon="el-icon-edit-outline" @click="updateCancle" v-if="updateShow">取消修改</el-button>
        <el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteDept" v-if="!deleteShow">删除</el-button>
        <el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteCancle" v-if="deleteShow">取消删除</el-button>
      </div>

      <div id="addBox">
        <addDepartment @cancle="canclePopup" @refresh="getDepartmentList" v-if="operationShow == 1"/>
        <updateDepartment @cancle="canclePopup" :data="updateDept" @refresh="getDepartmentList" v-if="operationShow == 2"/>
      </div>

      <!-- 部门结构树 -->
      <tree :data="deptTree" @refresh="getUserList"></tree>
    </div>

    <div class="personnel">
      <div class="personnelTop">
        <el-input style="width: 200px;" size="mini" placeholder="输入姓名/账号/电话全局搜索"></el-input>
        <el-button size="mini" type="primary" icon="el-icon-search">搜索</el-button>
        <el-button class="userAdd" size="mini" type="success" icon="el-icon-circle-plus-outline" @click="addUserShow = true">新增人员</el-button>
      </div>
      <el-table :data="userData" border v-loading="tableLoading">
        <el-table-column label="姓名" prop="username" size="mini" align="center"></el-table-column>
        <el-table-column label="账号" prop="account" size="mini" align="center"></el-table-column>
        <el-table-column label="角色" prop="roleName" size="mini" align="center"></el-table-column>
        <el-table-column label="性别" prop="sex" size="mini" align="center">
          <template slot-scope="scope">
            {{scope.row.sex | sexFilter}}
          </template>
        </el-table-column>
        <el-table-column label="电话" prop="mobilephone" size="mini" align="center"></el-table-column>
        <el-table-column label="操作" size="mini" align="center" width="180px">
          <template slot-scope="scope">
            <el-button size="mini" type="warning" @click="updateUserShow = true;row = scope.row">修改</el-button>
            <el-button size="mini" type="danger" @click="deleteUser(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>

    <el-dialog title="新增人员" :visible.sync="addUserShow" width="620px" :close-on-click-modal="false" :close-on-press-escape="false">
      <addUser v-if="addUserShow" :id="deptId" @closeDialog="addUserShow = false" @refresh="refreshPage" />
    </el-dialog>

    <el-dialog title="修改人员" :visible.sync="updateUserShow" width="620px" :close-on-click-modal="false" :close-on-press-escape="false">
      <updateUser v-if="updateUserShow" :row="row" @closeDialog="updateUserShow = false" @refresh="refreshPage" />
    </el-dialog>
  </div>
</template>

<script>
  import tree from './components/tree.vue'
  import addUser from './components/addUser.vue'
  import updateUser from './components/updateUser.vue'
  import addDepartment from './components/addDepartment.vue'
  import updateDepartment from './components/updateDepartment.vue'

  export default {
    name: 'user',
    components: { tree , addUser , addDepartment , updateDepartment , updateUser},
    filters: {
      sexFilter(sex) {
        return sex == 1 ? '男' : '女'
      }
    },
    data() {
      return {
        addUserShow: false,
        updateUserShow: false,
        userData: [],
        addForm: {},
        deptList: [],
        deptTree: [],
        rules: {
          deptName: [{ required: true, message: '请输入部门名称', trigger: 'blur' },],
          pid: [{ required: true, message: '请输选择上级部门', trigger: 'blur' },],
        },
        searchForm: {
          currentPage: 1,
          size: 10
        },
        deptId: null,
        operationShow: null,
        updateDept: {},
        updateShow: false,
        deleteShow: false,
        tableLoading: true
      }
    },
    mounted() {
      this.getDepartmentList();

      this.bus.$on('tree-update', (treeNode) => {
        this.updateDept = treeNode;
        this.addPopup();
        this.operationShow = 2;
      })

      this.bus.$on('tree-delete', (treeNode) => {
        this.$confirm('此操作将永久删除该部门件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios({
            method: 'post',
            url: '/system/department/delete/' + treeNode.id,
          }).then(res => {
            if(res.code == 200) {
              this.$message.success('删除部门成功');
              this.getDepartmentList();
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

      })
    },
    methods: {
      cancle(){
        this.canclePopup()
      },
      addDept() {
        this.addPopup();
        this.operationShow = 1;
      },
      update() {
        this.updateShow = true;
        this.bus.$emit('updateShow', true);
      },
      updateCancle() {
        this.updateShow = false;
        this.bus.$emit('updateShow', false);
      },
      deleteDept() {
        this.deleteShow = true;
        this.bus.$emit('deleteShow', true);
      },
      deleteCancle() {
        this.deleteShow = false;
        this.bus.$emit('deleteShow', false);
      },
      addPopup() {
        let addBox = document.getElementById('addBox');
        let addBoxWidth = parseInt(window.getComputedStyle(addBox).width);
        let len = -addBoxWidth;
        let timer = setInterval(function() {
          len += 3.6;
          addBox.style.marginLeft = len + 'px';
          if(len >= 0) {
            clearInterval(timer)
          }
        },1)
      },
      canclePopup() {
        let addBox = document.getElementById('addBox');
        let addBoxWidth = parseInt(window.getComputedStyle(addBox).width);
        let len = 0;
        let timer = setInterval(function() {
          len -= 3.6;
          addBox.style.marginLeft = len + 'px';
          if(len <= -addBoxWidth) {
            clearInterval(timer)
          }
        },1)
      },
      getDepartmentList() {
        this.$axios({
          method: 'get',
          url: '/system/department/list'
        }).then(res => {
          this.deptList = res.data;
          this.deptTree = res.data[0]
          this.recursion(res.data,this.deptTree)
        })
      },
      recursion(list,parent) {
        parent.children = [];
        list.forEach(item => {
          if(item.pid == parent.id) {
            parent.children.push(item);
            this.recursion(list,item)
          }
        })
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$axios({
              method: 'post',
              url: '/system/department/add',
              data: this.addForm
            }).then(res => {
              if(res.code == 200) {
                this.$message.success('添加部门成功');
                this.canclePopup();
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      getUserList(item) {
        this.searchForm.deptId = item.id;
        this.deptId = item.id;
        this.$axios({
          method: 'get',
          url: '/system/user/page',
          params: this.searchForm
        }).then(res => {
          this.userData = res.data.records;
          this.tableLoading = false;
        })
      },
      refreshPage() {
        this.$axios({
          method: 'get',
          url: '/system/department/get-by-id',
          params: { deptId : this.deptId }
        }).then(res => {
          this.getUserList(res.data)
        })
      },
      deleteUser(item) {
        this.$confirm('此操作将永久删除该人员, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios({
            method: 'post',
            url: '/system/user/deleteUser',
            data: this.$qs.stringify({ id : item.id })
          }).then(res => {
            if(res.code == 200) {
              this.$message.success('删除人员成功');
              this.refreshPage();
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    }
  }
</script>

<style scoped>
  .user {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    display: -webkit-flex;
  }
  .department {
    width: 26%;
    height: 100%;
    border-right: 2px solid #ccc;
    position: relative;
    overflow: auto;
  }
  .departmentTop {
    width: 100%;
    border-bottom: 1px solid #ccc;
    text-align: center;
    padding: 10px 0;
  }
  .personnelTop {
    padding: 10px 0;
    margin-left: 20px;
  }
  .departmentTitle,
  .personnelTitle {
    margin: 0;
    font-size: 16px;
  }
  .departmentTitle span,
  .personnelTitle span {
    display: inline-block;
    padding: 6px 14px;
    background-color: #1890FF;
    border-radius: 5px;
    color: #fff;
    margin-bottom: 10px;
  }
  #addBox {
    height: 150px;
    width: calc(100% - 4px);
    background-color: #fff;
    border-bottom: 1px solid #aaa;
    border-right: 1px solid #aaa;
    border-radius: 5px;
    margin-left: -100%;
    position: absolute;
    z-index: 2000;
  }

  .personnel {
    height: 100%;
    width: calc(74% - 2px);
  }
  .deptName {
    display: inline-block;
    background-color: #eee;
    padding: 6px 10px;
    border-radius: 5px;
  }
  .userAdd {
    position: absolute;
    right: 20px;
    top: 10px;
  }


</style>
